<template>
    <div class="container">
    <div>
      <div>
        <el-form ref="dataForm" :model="record" :rules="recordRules" label-position="top" size="small"  label-width="110px">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="银行全称" prop="bankName">
                <el-input v-model="record.bankName" placeholder="银行全称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="银行简称" prop="shortBankName">
                <el-input v-model="record.shortBankName" placeholder="银行简称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="银行账号" prop="accountNo">
                <el-input v-model="record.accountNo" placeholder="银行账号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="银行地址" prop="bankAddress">
                <el-input type="textarea" :rows="3" v-model="record.bankAddress" placeholder="银行地址"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="联系人" prop="attention">
                <el-input v-model="record.attention" placeholder="联系人"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="传真" prop="fax">
                <el-input v-model="record.fax" placeholder="传真"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="类型" prop="type">
                <el-select v-model="record.type" clearable placeholder="类型">
                  <el-option
                    v-for="item in typesOptions"
                    :key="item.type"
                    :label="item.value"
                    :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="menu-navbar">
        <el-button size="small" type="success" @click="createSave('dataForm')">保存</el-button>
        <el-button size="small" type="success" @click="closeSelf()">关闭</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import {
  Select,Insert,Update,getUUID
} from '@/api/basicInfo/sgBankInfo'
import moment from  'moment'
 export default {
      name: 'sgBankInfoDetail',
      props: ['openType', 'formId'],
      data() {
      return {
        activeName: 'first',
        typesOptions: [
          {
            type: '0',
            value: 'PAYMENT'
          },
          {
            type: '1',
            value: 'RECEIPT'
          },
          {
            type: '2',
            value: 'LC'
          }
        ],
        record: {
          id: '',
          title: '收付款银行账户信息',
          bankName: '',
          shortBankName: '',
          bankAddress: '',
          accountNo: '',
          attention: '',
          fax: '',
          type: ''
        },
        recordRules: {
          userId: [
            { message: '标题不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 256, message: '最大长度为 256 个字符', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.initPage()
    },
    // watch: {
    //   initPage() { // 普通的watch监听通的watch监听
    //   //this.initPage()
    //   }
    // },
    methods: {
      initPage() {
        if (this.openType === 'edit') {
          this.fetchData()
        }else if (this.openType === 'detail'){
            getUUID().then(res => {
              this.record.id = res.data.data;
          });
        }
      },
      fetchData() {
        let queryArgs = {
            condition: {
            id: {
              property: 'id',
              value: '',
              type: 'EQ'
            }
          },
        }
        if (this.formId) {
          queryArgs.condition.id.value = this.formId
        }
        Select(queryArgs).then(res => {
          this.loading = false
          this.record = res.data.data.records[0]
        }).catch((err) => {
          console.log(err)
        })
      },
      createSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveRecord()
        } else {
          this.$message({
            type: 'danger',
            message: '添加失败!'
          })
          console.log('error submit!!')
          return false
        }
      })
    },
    saveRecord(type) {
      if (this.openType === 'detail') {
        // 插入
        Insert(this.record).then(res => {
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
            this.record = res.data.data
            //新增保存之后表单状态变为编辑
            this.openType = 'edit'
          }).catch((err) => {
            console.log(err)
          })
      }else{
        // 更新
          Update(this.record).then(res => {
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
            this.record = res.data.data
          }).catch((err) => {
            console.log(err)
          })
      }
      },
      closeSelf() {
      this.$emit('changeCloseDialog')
    },
    }
 }
</script>
<style scoped>
  .menu-navbar{
    padding:0 0 20px;
    text-align: right;
  }
  .container{
    padding: 0 10px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>